<template>
	<xm-container :loading="loading">
		<template v-slot="{ message }">
			<view class="container">
				<view class="scroll-box">
					<view class="title">
						<view class="title-box">"{{ titleName }}"的对话</view>
					</view>
					<TnLazyLoad :src="picture" mode="widthFix" class="banner-img" />
					<view class="textBox mt-12" v-if="activeTap == 0">
						<view class="text flex flex-js-sb flex-ai-center" v-for="(item, index) in asList" :key="index" :class="
						asListIndex == index && playing ? 'activeText'
						  : ''
					  " :id="`right${index}`">
						<text class="mr-10">{{ item.text }}</text>
						<image v-if="asListIndex == index && playing" style="width:40rpx;height:40rpx;flex-shrink:0" src="../../static/imgs/play-css-blue.gif" mode=""></image>
					  </view>
					</view>
					<view v-if="activeTap == 1">
						<view class="textBox mt-12">
							<view v-for="(item, index) in readList" :key="index" :id="`scroll${index}`">
								<view class="text" :class="readLine == index ? 'activeText' : ''" :id="`right${index}`">
									<text>{{ item.text }}</text></view>
								<view class="result-wrap" v-if="item.isShowResult">
									<view class="comment-box">
										<view class="result-bar"> {{ item.result }} </view>
									</view>
									<view class="comment-bar mt-2 text-right">
										<view v-if="!item.isShowComment">分值计算中...</view>
										<TnRate v-if="item.isShowComment" v-model="item.rateValue"
											active-color="#FAC909" :min="0" size="28rpx" :max="5" allow-half :readonly="true"
											style="float: right; margin-top: 6rpx" />
									</view>
								</view>
								<TnLineProgress :percent="progressPercent" :duration="duration"
									v-if="readLine == index && readingStatus !== 0" show-percent :stripe="true"
									stripe-animated height="40" active-color="#4b49e8">
									<text>{{readingStatus == 1? '请开始朗读': readingStatus == 2? '评分中 ': '请稍等'
              }}</text>
								</TnLineProgress>
							</view>
						</view>
					</view>
					<view class="imgBox flex flex-ai-center">
						<button class="mr-8" open-type="share">
							<TnIcon name="share-square" color="#747474" size="48rpx" />
						</button>
						<image class="imgBox-icon mr-8" :class="ifZanStatus == 1 ? 'animation':''"
							:src="ifZanStatus == 1 ? ossPngList.likeOk : ossPngList.likeNot" @tap.stop="onZanIconClick">
						</image>
						<image class="imgBox-icon" :class="ifZanStatus == 2 ? 'animation':''"
							:src="ifZanStatus == 2 ? ossPngList.stepOk : ossPngList.stepNot" @tap.stop="onCaiIconClick">
						</image>
					</view>
				</view>

				<view class="bottom_box">
					<view class="wrap">
						<view class="btn-box" @click="toListing">
							<view :class="activeTap == 0 && playing ? 'active-iconBox' : 'iconBox'">
								<view :class="activeTap == 0 && playing ? 'is-animation' :''">
									<TnIcon name="sound-fill" :size="activeTap == 0 && playing ? '80rpx' : '50rpx'"
										:color="activeTap == 0 && playing ? '#ffffff' : ''" />
								</view>
							</view>
							<view :class="activeTap == 0 && playing ? 'active-btn-item' : 'btn-item'">AI朗读</view>
						</view>
						<view class="btn-box" @click="toReading">
							<view :class="
              activeTap == 1 && readLine !== -1 ? 'active-iconBox' : 'iconBox'
            ">
								<view :class="activeTap == 1 && readLine !== -1 ? 'is-animation' :''">
									<TnIcon name="voice-fill"
										:size="activeTap == 1 && readLine !== -1 ? '80rpx' : '50rpx'"
										:color="activeTap == 1 && readLine !== -1 ? '#ffffff' : ''" />
								</view>

							</view>
							<view :class="
              activeTap == 1 && readLine !== -1 ? 'active-btn-item' : 'btn-item'
            ">智能跟读</view>
						</view>
						<view class="btn-box" @click="toChangeNew">
							<view :class="isAnimation ? 'active-iconBox' : 'iconBox'">
								<span :class="isAnimation ? 'refish' : ''">
									<TnIcon name="refresh" :size="isAnimation ? '80rpx' : '50rpx'"
										:color="isAnimation ? '#ffffff' : ''" />
								</span>
							</view>
							<view :class="isAnimation ? 'active-btn-item' : 'btn-item'">AI换一批</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</xm-container>
</template>

<script lang="ts" setup>
	import { onMounted, ref, watch, watchEffect } from 'vue'
	import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
	import { onLoad, onHide, onUnload } from '@dcloudio/uni-app'
	import { xmContainer } from '@/components/xm-container'
	import { getSceneDetailById, toDown, toUp } from '@/services/api'
	import { Base64 } from 'js-base64'
	import { useWebsocket } from '@/hooks'
	import srtParser2 from 'srt-parser-2'
	import TnLineProgress from '@tuniao/tnui-vue3-uniapp/components/line-progress/src/line-progress.vue'
	import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
	import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp/components/modal'
	const modalRef = ref<TnModalInstance>()
	var plugin = requirePlugin('WechatSI')
	const loading = ref(false)
	let manager = plugin.getRecordRecognitionManager()
	const {
		connectWebSocketComment,
		connectWebSocket,
		APPID,
		toBase64,
		handlePlayVideo,
		textTranslate,
		webSocketSendComment,
		webSocketSend,
		webSocketSendOneComment,
		base64toJson,
		handleClickVideo,
		webSocketSendMp3,
		handleCloseVideo,
		splitText,
		closeWebSocket,
		handleDebounce
	} = useWebsocket()
	const innerAudioContext = uni.createInnerAudioContext()
	const answer = ref('')
	const titleName = ref('')
	const currentTime = ref(0)
	const picture = ref('')
	const asList = ref([] as any)
	const audio = ref('')
	const playing = ref(false)
	let music = uni.createInnerAudioContext()
	// let promptSound = uni.createInnerAudioContext() //提示音
	const overMp3 =
		'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/over.mp3'
	const niceMp3 =
		'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/nice.mp3'
	const excellent =
		'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/excellent.mp3'
	const activeTap = ref(-1) //0为AI朗读，1为智能跟读
	const readLine = ref(-1) //当前需要朗读的第几行
	const progressPercent = ref(100) //进度条百分比
	const readingStatus = ref(0) //0初始值，1朗读中，2评分中
	const duration = ref(0) //当前句子的时长
	const currentItem = ref({} as any) //当前朗读的句子
	const tempFilePath = ref() //录音文件
	const readList = ref([] as any) //跟读句子列表
	const isAnimation = ref(false)
	// 获取录音
	const recorderManager = uni.getRecorderManager()
	const ids = ref([]) //读过的文章id
	const styleId = ref('')
	const ifZanStatus = ref(0) //0初始值，1赞,2踩
	const asDetail = ref({} as any) //文章详情
	const stopSendWebsocket = ref(false) //停止发送websocket
	var timeout = null as any
	const rightIndex = ref(`right${0}`)
	const scrollTop = ref(0)
	const offsetTop = ref('300')
	let scrollPageHeight = 0
	let array = [] as AnyObject
	let arrayIndex = 0
	const currentNum = ref(0)
	const asListIndex = ref(-1)
	const ossPngList = ref({
		likeOk: "http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/likeOk.png",
		likeNot: "http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/likeNot.png",
		stepOk: "http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/stepOk.png",
		stepNot: "http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/stepNot.png"
	})
	const likePng = ref('../../../static/imgs/play-white.png')
	const toListing = () => {
		//关闭录音监听和发送
		stopSendWebsocket.value = true
		refresh()
		if (activeTap.value !== 0) {
			initScrollHeight()
		}
		activeTap.value = 0
		onPlayIconClick()
	}
	const toReading = () => {
		console.log("toReadingtoReading",readLine.value)
		if (readLine.value == -1) {
			clearTimeout(timeout)
			music.stop()
			playing.value = false
			readList.value = JSON.parse(JSON.stringify(asList.value))
			//刷新
			refresh()
			initScrollHeight()
			activeTap.value = 1
			readLine.value = 0
			stopSendWebsocket.value = true
			handleDebounce(() => {
				setTimeout(() => {
					readSentence()
				}, 1500)
			}, 500)
		} else {
			//停止朗读
			handleDebounce(() => {
				refresh()
				readList.value = JSON.parse(JSON.stringify(asList.value))
				initScrollHeight()
				clearTimeout(timeout)
				//关闭录音监听和发送
				stopSendWebsocket.value = true
			}, 500)
		}
	}
	// const toReading = () => {
	//   if (readLine.value == -1) {
	//     modalRef.value?.showModal({
	//       title: '提示',
	//       content: '请跟着一下句子朗读',
	//       confirmText: '知道了',
	//       confirm: () => {
	//         clearTimeout(timeout)
	//         music.stop()
	//         playing.value = false
	//         readList.value = JSON.parse(JSON.stringify(asList.value))
	//         console.log('智能跟读', readList.value)
	//         //刷新
	//         refresh()
	//         initScrollHeight()
	//         activeTap.value = 1
	//         readLine.value = 0
	//         stopSendWebsocket.value = true
	//         setTimeout(() => {
	//           console.log('立即朗读')
	//           readSentence()
	//         }, 2000)
	//       },
	//     })
	//   } else {
	//     //停止朗读
	//     refresh()
	//     readList.value = JSON.parse(JSON.stringify(asList.value))
	//     initScrollHeight()
	//     clearTimeout(timeout)
	//     //关闭录音监听和发送
	//     stopSendWebsocket.value = true
	//     // activeTap.value = -1
	//   }
	// }

	//朗读倒计时
	const readSentence = () => {
		console.log("readSentencereadSentence")
		stopSendWebsocket.value = false
		rightIndex.value = 'right' + readLine.value
		offsetTop.value = '50%'
		if (readLine.value > readList.value.length - 1 || readLine.value == -1) {
			// 朗读结束刷新
			refresh()
			return
		} else {
			//当前需要朗读的第几行
			currentItem.value = readList.value[readLine.value]
			duration.value =
				(currentItem.value.endSeconds - currentItem.value.startSeconds) * 1000 +
				3000
			//打开websoket
			startRecord()
		}
	}

	// 朗读开始录制
	const startRecord = () => {
		if (!stopSendWebsocket.value) {
			try {
				stopSendWebsocket.value = false
				connectWebSocket().then((res) => {
					if (res != '') {
						readList.value[readLine.value].result = res
						readList.value[readLine.value].isShowResult = true
					} else {
						readList.value[readLine.value].isShowResult = true
						uni.showToast({
							title: '未识别到文字',
							icon: 'none',
						})
					}
				})
				// 评分
				connectWebSocketComment(readList.value[readLine.value].text)
					.then((res) => {
						if (readLine.value !== -1) {
						}
						readList.value[readLine.value].isShowComment = true
						readList.value[readLine.value].rateValue = Number(res.total_score)
						if (!readList.value[readLine.value].hasOwnProperty('repeatNum')) {
							readList.value[readLine.value].repeatNum = 0
						}
						//打分成功且分数小于三分且repeatNum = 0则再朗读一遍
						if (
							readList.value[readLine.value].rateValue < 3 &&
							readList.value[readLine.value].repeatNum < 1
						) {
							uni.showToast({
								title: '不合格再读一遍吧',
								icon: 'none',
								duration: 2000,
							})
							playSound(readList.value[readLine.value].rateValue).then(() => {
								let currentIndex = readLine.value
								readLine.value = -1
								setTimeout(() => {
									readLine.value = currentIndex
									readList.value[readLine.value].repeatNum += 1
									//关闭websocket
									closeWebSocket()
									readSentence()
								}, 2000)
							})
						} else {
							//分数大于等于三分或者repeatNum > 0则再继续下一句
							if (
								readList.value[readLine.value].repeatNum > 0 &&
								readList.value[readLine.value].rateValue < 3
							) {
								toScroll(`#scroll${readLine.value}`)
								readLine.value += 1
								//关闭websocket
								closeWebSocket()
								readSentence()
							} else {
								playSound(readList.value[readLine.value].rateValue).then(() => {
									toScroll(`#scroll${readLine.value}`)
									readLine.value += 1
									//关闭websocket
									closeWebSocket()
									readSentence()
								})
							}
						}
					})
					.catch((err) => {
						if (stopSendWebsocket.value) {
							console.log('手动人为关闭')
						} else {
							readList.value[readLine.value].isShowComment = false
							uni.showToast({
								title: '评分超时',
								icon: 'none',
								duration: 2000,
							})
							playSound(readList.value[readLine.value].rateValue).then(() => {
								let currentIndex = readLine.value
								readLine.value = -1
								setTimeout(() => {
									readLine.value = currentIndex
									//关闭websocket
									closeWebSocket()
									readSentence()
								}, 2000)
							})
						}
					})
				readingStatus.value = 1
				//录音结束倒计时
				timeout = setTimeout(() => {
					if (!stopSendWebsocket.value) {
						endRecord()
					}
				}, duration.value)
				recorderManager.start({
					duration: 120000, // 600000（10 分钟）,默认值 60000（1 分钟）
					numberOfChannels: 1, // 录音通道数，有效值 1/2
					frameSize: 10,
					format: 'mp3', // 音频格式
					sampleRate: 16000, // 采样率
				})
			} catch (e) {
				console.log('错误了', e)
			}
		} else {
			console.log('手动关闭结束录制')
			return
		}

		// state.list[currentIndex.value].isShowResult = true
		// 常规
	}
	// 朗读停止
	const endRecord = () => {
		recorderManager.stop()
		readingStatus.value = 2
	}
	const startWatch = () => {
		var lastFrame = [] as any
		currentNum.value = 0
		recorderManager.onStop(function (res) {
			if (!stopSendWebsocket.value) {
				// 监听最后一帧
				// 基础
				webSocketSend(lastFrame, true).then((res) => {
					if (res == 'success') {
					}
				})
				webSocketSendComment(
					lastFrame,
					readList.value[readLine.value].text,
					true,
					'end'
				).then((res) => {
					if (res == 'success') {
					}
				})
				let tempFile = res.tempFilePath //音频文件地址
				tempFilePath.value = tempFile
				// #ifdef MP-WEIXIN
				const fs = uni.getFileSystemManager()
				// 评分
				fs.readFile({
					//读取文件并转为ArrayBuffer
					filePath: tempFile,
					success(res) { },
				})
				currentNum.value = 0
			} else {
				closeWebSocket()
			}
			// #endif
		})
		recorderManager.onFrameRecorded(function (res) {
			if (!stopSendWebsocket.value && readLine.value !== -1) {
				const { frameBuffer, isLastFrame } = res
				lastFrame = frameBuffer
				let newFrameBuffer = Array.from(new Uint8Array(frameBuffer))
				// 基础
				webSocketSend(frameBuffer, isLastFrame).then((res) => {
					if (res == 'success') {
					}
				})
				// 评分
				webSocketSendComment(
					frameBuffer,
					readList.value[readLine.value].text,
					isLastFrame,
					currentNum.value
				).then((res) => {
					if (res == 'success') {
					}
				})
				currentNum.value = currentNum.value + 1
				if (isLastFrame) {
					currentNum.value = 0
				}
			} else {
				closeWebSocket()
				console.log('停止发送websocket')
			}
		})
	}
	//刷新智能跟读
	const refresh = () => {
		//关闭录音
		endRecord()
		readLine.value = -1
		readingStatus.value = 0
		duration.value = 0
		currentItem.value = {}
	}
	//换一批
	const toChangeNew = () => {
		//关闭录音监听和发送
		isAnimation.value = true
		initScrollHeight()
		clearTimeout(timeout)
		music.stop()
		playing.value = false
		stopSendWebsocket.value = true
		handleDebounce(() => {
			refresh()
			getData()
		}, 500)
	}

	const onPlayIconClick = () => {
		if (playing.value) {
			music.pause()
			playing.value = false
		} else {
			playing.value = true
			const testFun = async function (i : number) {
				asListIndex.value = i;
				let num = await handlePath(asList.value[i].path)
				if (i == asList.value.length - 1) {
					playing.value = false
					asListIndex.value = -1;
					return;
				}
				i++;
				testFun(i);
			}
			if(asListIndex.value == -1){
				testFun(0);	
			}else{
				testFun(asListIndex.value);
			}
		}
	}
	const handlePath = (str:string) =>{
		return new Promise((resolve, reject) => {
			music.src = str
			// console.log(filename,"filenamefilenamefilename")
			music.play() //执行播放
			music.onEnded(() => {
				//播放结束
				music.stop()
				resolve(true)
			})
		})
	}
	//初始化页面滚动高度
	const initScrollHeight = () => {
		arrayIndex = 0
		scrollPageHeight = 0
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 200,
		})
	}

	const toScroll = (query : string) => {
		setTimeout(() => {
			uni
				.createSelectorQuery()
				.select(query)
				.boundingClientRect((res) => {
					scrollPageHeight = scrollPageHeight + res?.height
					uni.pageScrollTo({
						// 3. 滚动的距离根据设备的页面高度进行微调（px）
						scrollTop: scrollPageHeight + 13,
						duration: 500,
					})
				})
				.exec()
		}, 50)
	}
	const str = ref('')
	var parser = new srtParser2()
	onLoad((options) => {
		activeTap.value = 0
		const { id, name, answerZh } = options
		styleId.value = id
		if (styleId.value) {
			getData()
		}
		if (name) {
			titleName.value = name
		}
		if (answerZh) {
			onTranslate(answerZh)
		}
		startWatch()
	})

	onHide(() => {
		music.stop()
		//关闭录音监听和发送
		stopSendWebsocket.value = true
		refresh()
		closeWebSocket()
	})
	onUnload(() => {
		readList.value = []
		music.stop()
		//关闭录音监听和发送
		stopSendWebsocket.value = true
		refresh()
		closeWebSocket()
	})
	const animation = () => {
		isAnimation.value = false
	}
	//将'00:01:60,888'格式时间转化为秒
	const setTime = (time) => {
		let aTime = time.split(',')[0]
		let sTime = '.' + time.split(',')[1]
		let s = aTime.split(':')[0]
		let f = aTime.split(':')[1]
		let m = aTime.split(':')[2]
		let allTime = Number(s * 3600 + f * 60 + Number(m) + sTime)
		return allTime
	}
	const getData = () => {
		let params = { ids: ids.value }
		getSceneDetailById(styleId.value, params).then((res) => {
			const { code, data } = res
			if (code === 0) {
				if (data.id !== 0) {
					asDetail.value = data
					str.value = data.subtitles
					data.audio_map = "[{\"audio\": \"https://aliyun-wb-bvqq7ezi1t.oss-cn-beijing.aliyuncs.com/appImage/2024/5-20/1716186887430.mp3\", \"content\": \"Miss Wu: Good morning! I'm Miss Wu. What's your name?\"}, {\"audio\": \"https://aliyun-wb-bvqq7ezi1t.oss-cn-beijing.aliyuncs.com/appImage/2024/5-20/1716186888296.mp3\", \"content\": \"Bill: Hello! My name is Bill.\"}, {\"audio\": \"https://aliyun-wb-bvqq7ezi1t.oss-cn-beijing.aliyuncs.com/appImage/2024/5-20/1716186889101.mp3\", \"content\": \"Bill: Good afternoon, Miss Wu.\"}, {\"audio\": \"https://aliyun-wb-bvqq7ezi1t.oss-cn-beijing.aliyuncs.com/appImage/2024/5-20/1716186889785.mp3\", \"content\": \"Miss Wu: Hi, Bill.\"}, {\"audio\": \"https://aliyun-wb-bvqq7ezi1t.oss-cn-beijing.aliyuncs.com/appImage/2024/5-20/1716186890475.mp3\", \"content\": \"Miss Wu: Bye, Bill.\"}, {\"audio\": \"https://aliyun-wb-bvqq7ezi1t.oss-cn-beijing.aliyuncs.com/appImage/2024/5-20/1716186891064.mp3\", \"content\": \"Bill: Goodbye.\"}]"
					str.value = data.subtitles
					let audioMap = []
					if(data.audio_map != "null"){
						audioMap = JSON.parse(data.audio_map)
						audioMap.map((item,index) =>{
							item.path = item.audio
							item.text = item.content
						})
					}
					asList.value = audioMap
					ids.value.push(data.id)
					music.src = data.audio
					audio.value = data.audio
					picture.value = data.picture
					ifZanStatus.value = data.like
					readList.value = JSON.parse(JSON.stringify(asList.value))
					currentTime.value = 0
					array = asList.value.map((item, index) => {
						return item.startSeconds
					})

					isAnimation.value = false
					setTimeout(function () {
						loading.value = true
					}, 500)
				} else {
					if (data.total) {
						ids.value = []
						getData()
					} else {
						uni.showToast({
							title: '暂时没有数据!',
							icon: 'none',
							duration: 2000,
						})
					}
				}
			}
		})
	}

	//点赞
	const onZanIconClick = async () => {
		const res = await toUp(asDetail.value.id)
		if (res.code === 0) {
			if (res.status === 1) {
				ifZanStatus.value = 1
				uni.showToast({
					title: '已赞',
					duration: 2000,
				})
			} else if (res.status === 0) {
				ifZanStatus.value = 0
			}
		} else {
			uni.showToast({
				title: res.msg,
				duration: 2000,
			})
		}
	}
	// 点踩
	const onCaiIconClick = async () => {
		const res = await toDown(asDetail.value.id)
		let { code } = res;
		if (code === 0) {
			if (res.status === 2) {
				ifZanStatus.value = 2
				uni.showToast({
					title: '已踩',
					duration: 2000,
				})
			} else if (res.status === 0) {
				ifZanStatus.value = 0
			}
		} else {
			uni.showToast({
				title: res.msg,
				duration: 2000,
			})
		}
	}

	//提示音播放
	const playSound = (score) => {
		return new Promise((resolve, reject) => {
			let promptSound = uni.createInnerAudioContext() //提示音
			let sound =
				score < 3
					? overMp3
					: 3 <= score && score < 4
						? niceMp3
						: score >= 4
							? excellent
							: ''
			promptSound.src = sound
			promptSound.play() //执行播放
			promptSound.onPlay(() => {
				console.log('播放中')
			})
			promptSound.onEnded(() => {
				// promptSound.stop()
				promptSound.destroy()
				promptSound.offEnded(() => {
					console.log('取消监听')
				})
				resolve(true)
			})
			promptSound.onError((res) => {
				console.log('播放错误', res.errMsg)
			})
		})
	}

	//中文翻译成英文
	const onTranslate = (answerZh) => {
		plugin.translate({
			lfrom: 'zh_CN',
			lto: 'en_US',
			content: answerZh,
			success: function (res) {
				if (res.retcode == 0) {
					answer.value = res.result
					outputText(answer.value)
				} else {
					console.warn('翻译失败', res)
				}
			},
			fail: function (res) {
				console.log('网络失败', res)
			},
		})
	}

	//流式输出文字
	const outputText = (text) => {
		var index = 0
		const streamOutput = () => {
			if (index < text.length) {
				var currentText = text.substring(0, index + 1)
				answer.value = currentText
				index++
			} else {
				clearInterval(timer)
			}
		}
		let timer = setInterval(streamOutput, 20)
	}
</script>

<style lang="scss" scoped>
	page {
		max-height: 100vh;
	}

	.container {
		.scroll-box {
			width: 100%;
			padding: 48rpx 48rpx 258rpx;

			.title {
				display: flex;
				justify-content: flex-end;
				margin-bottom: 48rpx;

				.title-box {
					background: linear-gradient(90deg, #6b8bfb 0%, #4b49e8 100%);
					border-radius: 32rpx 0 32rpx 32rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
					text-align: center;
					padding: 24rpx 32rpx;
				}
			}

			.banner-img {
				width: 100%;
				// height: 384rpx;
				margin-bottom: 24rpx;
			}

			.textBox {
				width: 100%;
				.text {
					width: 100%;
					font-size: 28rpx;
					color: #191919;
					border-radius: 0 22rpx 22rpx 22rpx;
					margin-bottom: 24rpx;
					background: linear-gradient(135deg,
							#ffffff 0%,
							rgba(255, 255, 255, 0.88) 0%,
							rgba(255, 255, 255, 0.49) 100%);
					padding: 24rpx;
				}

				.activeText {
					text{
						color: #4b49e8;
						font-size: 30rpx;
						font-weight: bold;
					}

				}

				.result-wrap {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					width: 100%;
					margin-bottom: 24rpx;
					display: grid;

					.comment-box {
						max-width: 500rpx;
						background: #fff;
						display: flex;
						align-items: flex-end;
						padding: 20rpx;
						border-radius: 40rpx;
						flex-direction: column;
						background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
						border-radius: 32rpx 0 32rpx 32rpx;
					}

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}
			}

			.imgBox {
				display: flex;
				justify-content: flex-end;

				button {
					margin: 0;
					background: none;
					padding: 0;
					margin-right: 16rpx;
				}

				&-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.bottom_box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;

			.wrap {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 100%;
				padding: 0 30rpx 50rpx;
				height: 258rpx;
				background: #ffffff;

				.btn-box {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 200rpx;

					.iconBox {
						width: 88rpx;
						height: 88rpx;
						background: #ffffff;
						box-shadow: 0rpx 8rpx 8rpx 0rpx #f8f8f8;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.active-iconBox {
						background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
						box-shadow: 0rpx 8rpx 8rpx 0rpx #f8f8f8;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						width: 120rpx;
						height: 120rpx;
						align-items: center;
						animation: spin .2s 0s 1
					}

					.refish {
						transition: 1s;
						transform: rotate(360deg);
					}

					.btn-item {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 28rpx;
					}

					.active-btn-item {
						color: #191919;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 28rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}

	:deep(.tn-modal) {
		border-radius: 48rpx !important;
		background: linear-gradient(164deg, #dee2ff 2%, #ffffff 100%);
		width: 556rpx !important;
		height: 344rpx !important;
	}

	:deep(.tn-modal__title) {
		font-size: 32rpx !important;
		color: #000000;
		font-weight: 600 !important;
		padding-top: 48rpx !important;
	}

	:deep(.tn-modal__content--text) {
		font-size: 24rpx;
		color: #666666;
	}

	:deep(.tn-modal__operation) {
		border-top: none !important;
		justify-content: center;
		margin-top: 48rpx !important;
	}

	:deep(.tn-modal__operation-btn) {
		width: 460rpx !important;
		height: 80rpx !important;
		background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
		border-radius: 40rpx;
		flex-grow: initial !important;
		font-size: 32rpx !important;
		color: #ffffff !important;
		line-height: 80rpx;
	}

	:deep(.tn-modal__content) {
		padding-top: 32rpx !important;
	}

	@keyframes spin {
		0% {
			scale: 0.9;
		}

		25% {
			scale: 1;
		}

		50% {
			scale: 1.1;
		}

		75% {
			scale: 1;
		}

		100% {
			scale: 0.9;
		}
	}

	/*点赞图标放大动画开始*/
	@keyframes myfirst {
		0% {
			scale: 0.9;
			transform: rotate(10deg);
		}

		100% {
			scale: 1;
			transform: rotate(0deg);
		}
	}

	.animation {
		animation: myfirst 0.5s;
	}
</style>